<div class="card" *ngIf="chat">
    <div class="card-header d-flex justify-content-between align-items-center">
        <div class="text-truncate fs-5 me-2">
            {{chat.name}} {{memberCount ? '(' + memberCount + ')' : ''}}
        </div>
        <i class="bi bi-card-text cursor-pointer" (click)="showPanel = !showPanel"></i>
    </div>

    <div #scrollLayout class="content p-3">
        @for (item of messages; track item.id) {
        @if (item.sender == 'system') {
        <div class="system text-center text-secondary mb-3">
            <small [ngbTooltip]="item.ts | date:'yyyy-MM-dd HH:mm:ss'">{{item.content}}</small>
        </div>
        } @else {
        <div class="d-flex" [class.flex-row-reverse]="item.sender == self.wxid">
            <div class="avatar pt-2">
                <img class="rounded" [src]="avatars[item.sender] || '/assets/icon.png'" />
            </div>
            <div class="mx-3" [ngbTooltip]="item.ts | date:'yyyy-MM-dd HH:mm:ss'">
                <div [class.text-end]="item.sender == self.wxid">
                    <small>{{memberMap[item.sender] && memberMap[item.sender].name || '-'}}</small>
                </div>
                <div class="alert {{item.sender == self.wxid ? 'alert-success' : 'alert-secondary'}}">
                    <div>{{item.content}}</div>
                </div>
            </div>
            <div class="mx-5"></div>
        </div>
        }
        }
    </div>

    <div class="card-footer">
        <textarea class="form-control" rows="5" placeholder="输入消息" [(ngModel)]="content"></textarea>
        <button class="btn btn-primary" (click)="sendTxt()">发送</button>
    </div>
</div>